<template>
	<div v-if="state.isShowDialog">
		<el-drawer v-model="state.isShowDialog" size="1000px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
			<template #header>
				<div class="flex-c-b">
					<span class="drawer-title">{{ state.dialogTitle }}</span>
					<div>
						<el-button @click="closeDialog" size="default"> 取 消 </el-button>
						<el-button :disabled="state.dialogType == 3" type="primary" @click="onSubmit(userForm)" size="default"> 确 定 </el-button>
					</div>
				</div>
			</template>
			<el-form
				:disabled="state.dialogType == 3"
				class="dialog-layout"
				:rules="rules"
				ref="userForm"
				:model="state.ruleForm"
				size="default"
				label-width="auto"
			>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<span class="head">预警条件</span>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="title">
							<div class="title-num">1</div>
							基础配置
						</div>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
						<el-form-item label="预警名称" prop="warningRuleName">
							<el-input v-model="state.ruleForm.warningRuleName" placeholder="请输入预警名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="预警等级" prop="warningLevel">
							<el-select v-model="state.ruleForm.warningLevel" placeholder="预警等级" size="default">
								<el-option v-for="item in state.warningLevelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="预警说明">
							<el-input v-model="state.ruleForm.warningDescrption" placeholder="请输入预警说明"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="全局规则">
							<el-switch v-model="state.ruleForm.isGlobalRule" :active-value="true" :inactive-value="false" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="title">
							<div class="title-num">2</div>
							条件配置
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="flex">
							<div class="schedule">
								<span class="radio"></span>
								<span class="line"></span>
								<el-select v-model="state.ruleForm.modifySearchRelationship" class="w_100" size="default">
									<el-option label="且" :value="1"></el-option>
									<el-option label="或" :value="0"></el-option>
								</el-select>
								<span class="line"></span>
								<span class="radio"></span>
							</div>

							<el-table :data="state.tableData" border :span-method="dataSpanMethod">
								<el-table-column prop="date" label="预警类型" align="center">
									<!-- <template #default="scope">
									<el-select v-model="scope.Level" size="default">
										<el-option label="查询数据" value="1"></el-option>
										<el-option label="修改数据" value="2"></el-option>
									</el-select>
								</template> -->
									<template #default="scope">
										{{ scope.row.type == 1 ? '查询数据' : '修改数据' }}
									</template>
								</el-table-column>
								<el-table-column prop="date" label="关系" align="center">
									<template #default="scope">
										<el-select v-if="scope.row.type == 1" v-model="state.ruleForm.searchRelationship" size="default">
											<el-option label="且" :value="1"></el-option>
											<el-option label="或" :value="0"></el-option>
										</el-select>
										<el-select v-else v-model="state.ruleForm.modifyRelationship" size="default">
											<el-option label="且" :value="1"></el-option>
											<el-option label="或" :value="0"></el-option>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column prop="date" label="时间范围" align="center">
									<el-select v-model="state.ruleForm.limitDataType" size="default">
										<el-option v-for="item in state.dateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
									</el-select>
								</el-table-column>
								<el-table-column prop="date" label="条件" align="center">
									<template #default="scope">
										<template v-if="scope.row.type == 1">
											<el-select class="mb10" v-model="csState.time" size="default">
												<el-option label="次数" :value="1"></el-option>
												<!-- <el-option label="数量" value="2"></el-option> -->
											</el-select>
											<el-select v-model="csState.time" size="default">
												<!-- <el-option label="次数" value="1"></el-option> -->
												<el-option label="数量" :value="1"></el-option>
											</el-select>
										</template>
										<template v-else>
											<el-select class="mb10" v-model="csState.time" size="default">
												<el-option label="次数" :value="1"></el-option>
											</el-select>
											<el-select v-model="csState.time" size="default">
												<el-option label="数量" :value="1"></el-option>
											</el-select>
										</template>
									</template>
								</el-table-column>
								<el-table-column prop="date" label="属性" align="center">
									<template #default="scope">
										<template v-if="scope.row.type == 1">
											<el-select class="mb10" v-model="state.ruleForm.searchTimesOperator" size="default">
												<el-option v-for="item in state.LogicalRelationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
											<el-select v-model="state.ruleForm.searchCountOperator" size="default">
												<el-option v-for="item in state.LogicalRelationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
										</template>
										<template v-else>
											<el-select class="mb10" v-model="state.ruleForm.modifyTimesOperator" size="default">
												<el-option v-for="item in state.LogicalRelationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
											<el-select v-model="state.ruleForm.modifyCountOperator" size="default">
												<el-option v-for="item in state.LogicalRelationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
										</template>
									</template>
								</el-table-column>
								<el-table-column prop="date" label="参数" align="center">
									<template #default="scope">
										<el-form-item prop="modifyTimes" required v-if="scope.row.type == 1">
											<el-input v-model="state.ruleForm.modifyTimes" class="mb10"></el-input>
											<el-input v-model="state.ruleForm.modifyCount"></el-input>
										</el-form-item>
										<el-form-item prop="searchTimes" required v-else>
											<el-input v-model="state.ruleForm.searchTimes" class="mb10"></el-input>
											<el-input v-model="state.ruleForm.searchCount"></el-input>
										</el-form-item>
										<!-- <template v-if="scope.row.type == 1">
											<el-input v-model="state.ruleForm.ModifyTimes" class="mb10"></el-input>
											<el-input v-model="state.ruleForm.ModifyCount"></el-input>
										</template>
										<template v-else>
											<el-input v-model="state.ruleForm.SearchTimes" class="mb10"></el-input>
											<el-input v-model="state.ruleForm.SearchCount"></el-input>
										</template> -->
									</template>
								</el-table-column>
								<!-- <el-table-column prop="date" label="操作" width="100" align="center">
								<template #default="scope">
									<el-button type="primary" v-if="scope.$index == 0" circle size="small" @click="onAddRow">
										<el-icon>
											<ele-Plus />
										</el-icon>
									</el-button>
									<el-button type="danger" v-else circle size="small" @click="onDelRow(k)">
										<el-icon>
											<ele-Delete />
										</el-icon>
									</el-button>
								</template>
							</el-table-column> -->
							</el-table>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="title">
							<div class="title-num">3</div>
							条件时间配置
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<div class="flex">
							<div class="schedule"></div>

							<el-table :data="state.tableDataTime" border>
								<el-table-column prop="date" label="关系" align="center">
									<el-select v-model="state.ruleForm.limitRequestDateRangeRelationship" size="default">
										<el-option label="且" :value="1"></el-option>
										<el-option label="或" :value="0"></el-option>
									</el-select>
								</el-table-column>
								<el-table-column prop="date" label="类型" align="center">
									<el-select v-model="csState.time" size="default">
										<el-option label="请求频率" :value="1"></el-option>
									</el-select>
								</el-table-column>
								<el-table-column prop="date" label="单位" align="center" width="200">
									<div class="flex">
										<el-form-item class="limit">
											<el-select v-model="state.ruleForm.limitDateRange" size="default" class="w_80">
												<el-option v-for="item in state.dateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
											</el-select>
										</el-form-item>
										<el-form-item prop="limitRequestTimesDate">
											<el-input type="number" v-model="state.ruleForm.limitRequestTimesDate"></el-input>
										</el-form-item>
									</div>
								</el-table-column>

								<el-table-column prop="date" label="参数" align="center">
									<el-form-item prop="limitRequestTimes">
										<el-input v-model="state.ruleForm.limitRequestTimes"></el-input>
									</el-form-item>
								</el-table-column>
							</el-table>
						</div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<span class="head">预警处置</span>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
						<el-form-item label="处置方式">
							<el-select v-model="state.ruleForm.triggeredOperation" size="default">
								<el-option v-for="item in state.TriggeredOperationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="时间单位">
							<el-select v-model="state.ruleForm.triggeredOperationDurationDateType" size="default">
								<el-option v-for="item in state.dateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
						<el-form-item label="时间参数" prop="triggeredOperationDuration">
							<el-input v-model="state.ruleForm.triggeredOperationDuration" placeholder="请输入时间参数" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" v-if="state.ruleForm.triggeredOperation == 0" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="限流访问次数" prop="limitedRequestTimes">
							<el-input type="number" v-model="state.ruleForm.limitedRequestTimes" placeholder="请输入限流访问次数" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-drawer>
	</div>
</template>
  
<script setup lang="ts" name="systemDicDialog">
import { reactive, ref, nextTick } from 'vue';
import { WarningRuleFactCreate, WarningRuleFactUpdate } from '/@/api/earlyWarning/index';
import { FormInstance, ElMessage } from 'element-plus';
import { del } from 'vue-demi';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const userForm = ref<FormInstance>();
const state = reactive({
	ruleForm: {
		warningRuleName: '', // 名称
		warningDescrption: '', // 说明
		warningLevel: 0, // 预警等级
		searchRelationship: 0, // 查询数据  0:或 1:且
		modifySearchRelationship: 0, // 修改数据  0:或 1:且
		limitRequestDateRangeRelationship: 0, // 修改数据  0:或 1:且
		modifyRelationship: 0, // 修改次数的运算逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
		modifyTimesOperator: 0, // 修改数量的次数逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
		modifyCountOperator: 0, // 修改数量的次量逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
		searchTimesOperator: 0, // 查询数据 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
		searchCountOperator: 0, // 查询数据 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
		modifyTimes: '', // 查询数据 修改次数
		modifyCount: '', // 查询数据 修改数量
		searchTimes: '', // 次数修改数据 修改次数
		searchCount: '', // 次数修改数据 修改数量
		limitDataType: 0, // 时请求率单位(0:秒1:分2:时3:天4:月5:年)
		limitDateRange: 0, // 时请求率单位(0:秒1:分2:时3:天4:月5:年)
		limitRequestTimesDate: '', //时请求率限定时间
		limitRequestTimes: '', //时请求率限定时间
		limitedRequestTimes: '', //时间请求次数
		triggeredOperationDuration: '', //时间参数
		triggeredOperation: 0, //处置方式0:限流, 10:熔断, 20:拉黑
		triggeredOperationDurationDateType: 0, //处置方式0:限流, 10:熔断, 20:拉黑
		isGlobalRule: true,
	} as any,
	isShowDialog: false,
	dialogTitle: '',
	dialogType: '' as any, // 新增编辑
	id: '',
	warningLevelList: [
		{
			name: '高',
			id: 3,
		},
		{
			name: '中',
			id: 2,
		},
		{
			name: '低',
			id: 1,
		},
		{
			name: '无',
			id: 0,
		},
	], // 预警等级
	LogicalRelationList: [
		{
			name: '大于',
			id: 0,
		},
		{
			name: '大于等于',
			id: 1,
		},
		{
			name: '等于',
			id: 2,
		},
		{
			name: '小于等于',
			id: 3,
		},
		{
			name: '小于',
			id: 4,
		},
	], //属性
	dateList: [
		{
			name: '秒',
			id: 0,
		},
		{
			name: '分',
			id: 1,
		},
		{
			name: '时',
			id: 2,
		},
		{
			name: '天',
			id: 3,
		},
		{
			name: '月',
			id: 4,
		},
		{
			name: '年',
			id: 5,
		},
	], //时间单位
	TriggeredOperationList: [
		{
			name: '限流',
			id: 0,
		},
		{
			name: '熔断',
			id: 10,
		},
		{
			name: '拉黑',
			id: 20,
		},
	], //处置方式
	tableData: [{ type: 1 }, { type: 2 }] as any,
	tableDataTime: [{}] as any,
});
const validateModifyTimes = (rule: any, value: any, callback: any) => {
	if (!state.ruleForm.modifyTimes || !state.ruleForm.modifyCount) {
		callback(new Error('请输入查询参数'));
	} else {
		callback();
	}
};
const validateSearchTimes = (rule: any, value: any, callback: any) => {
	if (!state.ruleForm.searchTimes || !state.ruleForm.searchCount) {
		callback(new Error('请输入修改参数'));
	} else {
		callback();
	}
};
const rules = reactive({
	warningRuleName: [{ required: true, message: '请输入预警名称', trigger: ['blur', 'change'] }],
	modifyTimes: [{ required: true, validator: validateModifyTimes, trigger: ['blur', 'change'] }],
	searchTimes: [{ required: true, validator: validateSearchTimes, trigger: ['blur', 'change'] }],
	limitedRequestTimes: [{ required: true, message: '请输入限流访问次数', trigger: ['blur', 'change'] }],
	limitRequestTimesDate: [{ required: true, message: '请输入单位', trigger: ['blur', 'change'] }],
	limitRequestTimes: [{ required: true, message: '请输入参数', trigger: ['blur', 'change'] }],
	triggeredOperationDuration: [{ required: true, message: '请输入时间参数', trigger: ['blur', 'change'] }],
});
const csState = reactive({
	time: 1,
});

// 合并

const dataSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
	if (columnIndex === 2) {
		if (rowIndex % 2 === 0) {
			return {
				rowspan: 2,
				colspan: 1,
			};
		} else {
			return {
				rowspan: 0,
				colspan: 0,
			};
		}
	}
};
// 打开弹窗
const openDialog = (type: any, row: any) => {
	userForm.value?.resetFields();
	state.ruleForm = initializeForm();
	state.isShowDialog = true;
	state.dialogType = type;
	if (type == 2 || type == 3) {
		state.dialogTitle = type == 2 ? '修改' : '详情';
		for (const key in state.ruleForm) {
			if (row[key]) state.ruleForm[key] = row[key];
		}
		state.ruleForm.limitedRequestTimes = row.limitedRequestTimes;

		state.id = row.id;
	} else {
		state.dialogTitle = '新增';
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
const initializeForm = () => ({
	warningRuleName: '', // 名称
	warningDescrption: '', // 说明
	warningLevel: 0, // 预警等级
	searchRelationship: 0, // 查询数据  0:或 1:且
	modifySearchRelationship: 0, // 修改数据  0:或 1:且
	limitRequestDateRangeRelationship: 0, // 修改数据  0:或 1:且
	modifyRelationship: 0, // 修改次数的运算逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
	modifyTimesOperator: 0, // 修改数量的次数逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
	modifyCountOperator: 0, // 修改数量的次量逻辑 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
	searchTimesOperator: 0, // 查询数据 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
	searchCountOperator: 0, // 查询数据 0:大于 1:大于等于 2:等于 3:小于等于 4:小于
	modifyTimes: '', // 查询数据 修改次数
	modifyCount: '', // 查询数据 修改数量
	searchTimes: '', // 次数修改数据 修改次数
	searchCount: '', // 次数修改数据 修改数量
	limitDataType: 0, // 时请求率单位(0:秒1:分2:时3:天4:月5:年)
	limitDateRange: 0, // 时请求率单位(0:秒1:分2:时3:天4:月5:年)
	limitRequestTimesDate: '', //时请求率限定时间
	limitRequestTimes: '', //时请求率限定时间
	limitedRequestTimes: '', //时间请求次数
	triggeredOperationDuration: '', //时间参数
	triggeredOperation: 0, //处置方式0:限流, 10:熔断, 20:拉黑
	triggeredOperationDurationDateType: 0, //处置方式0:限流, 10:熔断, 20:拉黑
	isGlobalRule: true,
});
// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	const valid = await formEl.validate();
	if (valid) {
		const params = { ...state.ruleForm };
		if (params.triggeredOperation !== 0) {
			delete params.limitedRequestTimes;
		}
		if (state.dialogType == '2') {
			await WarningRuleFactUpdate(params, state.id);
		} else {
			await WarningRuleFactCreate(params);
		}

		ElMessage.success(state.dialogType == '2' ? '修改成功' : '新增成功');
		closeDialog();
		emit('refresh');
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
.head {
	font-size: 18px;
	position: relative;
	padding-left: 8px;
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 2px;
		height: 18px;
		background-color: #296dff;
	}
}
.title {
	display: flex;
	align-items: center;
	.title-num {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		font-size: 14px;
		border-radius: 50%;
		color: #296dff;
		text-align: center;
		border: 2px solid #296dff;
		margin-right: 10px;
		font-weight: 600;
	}
}
.schedule {
	display: flex;
	flex-direction: column;
	width: 200px;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
	span {
		display: block;
	}
	.radio {
		width: 18px;
		height: 18px;
		background-color: #296dff;
		border-radius: 50%;
	}
	.line {
		width: 2px;
		height: 40px;
		background-color: #296dff;
	}
}
.limit {
	margin-bottom: 0 !important;
}
</style>

